.App, #root {
  width: 100%;
}

.layout {
  height: 100%;
  text-align: center;
  background-color: #fff;
  font-size: calc(10px + 2vmin);
  color: white;
}

.sider {
  background: #454545;
}

.sider-row {
  width: 100%;
}

.sider-row .ant-col:not(:first-of-type) {
  width: 100%;
  max-width: 100%;
  text-align: left;
  padding: 5px 20px;
  font-size: calc(3px + 2vmin);
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word; 
}

.sider-row .ant-col:not(:first-of-type) div {
  display: inline-block;
  padding-left: 10px;
  font-size: 14px;
}

.content {
  background: #eee;
}

.aboutMe {
  font-size: calc(1px + 2vmin);
  margin-top: 20px;
  padding-left: 0!important;
  color: #dfdfdf;
}

.header-img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  margin-top: 40px;
}

.changeHeader {
  position: absolute;
  top: 0;
  margin-top: 40px;
  width: 160px;
  height: 150px;
  border-radius: 50%;
  font-size: 12px;
  opacity: 0;
}

.ant-rate-star {
  margin-right: 0;
}

.sider-row-bottom .col-header {
  text-align: left;
}

.sider-row-bottom .col-header i {
  text-align: left;
  padding: 5px 10px 5px 10px;
  font-size: calc(3px + 2vmin);
  white-space: normal;
  word-break: break-all;
  word-wrap: break-word; 
}

.sider-row-bottom .col-header div {
  display: inline-block;
  font-size: 14px;
}

.sider-row-bottom .col-star:not(:first-of-type) div {
  padding-left: 4px;
}